import React from 'react';
import createG2 from 'g2-react';

class ChartOfPassRate extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      data: [
        { name: '食品', value: 0.7 },
        { name: '流通', value: 0.5 },
        { name: '生产', value: 0.8 },
        { name: '一类', value: 1.0 },
        { name: '二类', value: 0.9 },
        { name: '三类', value: 0.6 },
      ],
    };
  }
  render() {
    const { data } = this.state;

    const Chart = createG2((chart) => {
      chart.col('value', {
        alias: '合格率'
      });
      chart.col('name', {
        alias: '种类'
      });
      chart.axis('value', {
        title: {
          fill: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.axis('name', {
        title: {
          fill: '#fff',
        },
        labels: {
          label: {
            fill: '#fff',
          },
        },
      });
      chart.interval()
        .position('name*value')
        .color('name', ['#348cd1', '#43b5d8', '#12f123', '#1f77b4', '#ff7f0e', '#2ca02c']);
      chart.tooltip(false);
      chart.legend({
        position: 'right',
        unChecked: '#fff',
        word: {
          fill: '#fff',
        },
      });
      chart.render();
    });

    return (
      <div className="chart-wrap">
        <Chart
          data={data}
          width={500}
          height={450}
          forceFit
        />
      </div>
    );
  }
}

export default ChartOfPassRate;
